<style lang="scss" scoped>
.order{ height:100%; background:#f1f1f1;}
.swiper{ height:100%;}
.scroll{ height:100%; overflow:hidden auto;}
.list{ padding:0 30rpx; padding-top:90rpx;
  .item{ background:#fff; position: relative; height:200rpx; display:flex;  box-shadow:#eee 0 0 10rpx; border-radius:15rpx; overflow:hidden; margin-top:35rpx;
		 .itm{ display:flex; overflow:hidden; align-items:center; justify-content:center;}
			.fl{ width:200rpx; text-align: center; .text{ color:#888;} .price{ color:#ff3000; font-size:60rpx; font-weight:bold; text{ color:#ff3000; font-weight:normal; font-size:30rpx;}}}
			.fm{ flex:1;.tit{ font-weight:bold;} .text{ padding-top:12rpx; color:#bfbfbf; font-size:26rpx;}}
			.fr{  width:200rpx; overflow:inherit; border-left:1px dotted #f1f1f1; padding:0 25rpx;
				.btn{ font-size:26rpx; height:65rpx; color:#fff; line-height:65rpx;} view{color:#bfbfbf;}  }	
			&:before,&:after { width:40rpx; height:40rpx; display:block; border-radius:50%; position:absolute; right:200rpx; margin-right:-22rpx; background:#f1f1f1; z-index:1; content:'';}
			&:before{ top:-30rpx;}&:after{ bottom:-30rpx;} 
  }	
}
</style>
<template>
	<view class="order">		
		<Tab :list="tab" ref="tab" :shownum=true v-on:change="tabChange"></Tab>
		<swiper @change="swiperChange" :current="tabIndex" class="swiper">
			<swiper-item v-for="(item,index) in tab" :key="index">
				<scroll-view class="scroll" @scrolltolower="scrolltolower" scroll-y>
				<view class="list">					
					 <view class="item" v-for="(itm,inx) in list" :key="inx">
							 <view class="itm fl">
									 <view class="boxc">
												<view class="price"><text>￥</text>{{itm.couponprice}}</view>
												<view class="text">抵扣{{itm.couponprice}}元</view>
										</view>
								</view>
								<view class="itm fm">
									 <view class="boxc">
									 		<view class="tit">{{itm.coupontitle}}</view>
									 		<view class="text">有效日期:{{itm.expiretime.substr(0,10)}}</view>
									 </view>
								</view>
								<view class="itm fr">
									  <view class="btn" @tap="go('/pages/index/index')" v-if="itm.use===0">立即使用</view>
											<view v-if="itm.use==1">已使用</view>
											<view v-if="itm.use==2">已过期</view>
								</view>
						</view>	
						<view v-if="list.length > 0 && !nomore" class="more">显示更多<image src="/static/loading.gif" /></view>
						<view v-if="list.length> 0 && nomore" class="more">没有更多数据啦!</view>
						<view class="nodata" v-if="nodata">
							  <image src="/static/noimg.png"></image>
									<view>暂无优惠券~</view>
						</view>
				</view>				
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {GetDateDiff,getCurrentTime} from '@/utils/util.js'
	import Tab from '@/pages/comm/tab.vue'
	import pay from '@/utils/pay.js'
	export default{
		 components:{Tab},
		 data(){
			 return{
				 tabIndex:0,
				 tab:[{txt:'未使用',num:0},{txt:'已使用',num:0},{txt:'已过期',num:0}],
				 list:[],
					nodata:false, //暂无数据
					nomore:false, //没有更多				
					query:{
						 current:1,  //当前页
							size:10,     //每页显示
							use:0,      //订单状态  0未 1已使用  2已过期
					}
			 }
		 },		
			
			onLoad(e){	
					this.changeData(0);
			},		
			
		 methods:{
				
				swiperChange(e){
						this.tabIndex = e.detail.current;
						this.$refs.tab.swipertab(this.tabIndex);
						this.changeData(this.tabIndex);
				},
				
				tabChange(e){
						this.tabIndex = e;
						this.changeData(e);
				},
				
				//切换
				changeData(use){					 
							this.list = [];
							this.query.use = use;
							this.query.current=1;
							this.nodata = false;
							this.nomore = false;
							this.getMemCouponList();
				},
				
				//上拉加载更多
				scrolltolower(){					  
					  if(this.nodata || this.nodata){ return; }
					  this.query.current++;
					  this.getOrderList();
				},
				
				//获取订单列表
				async getMemCouponList(){
					  const json = await this.api.memCouponList({q:this.query});
							if(json.data.code==0){
								  let data = json.data.data;
										this.tab[0].num = data.use0;
										this.tab[1].num = data.use1;
										this.tab[2].num = data.use2;
										if(data.total==0){ this.nodata = true;  return; }
										let list = data.list;
										if(this.query.current==1){
											 this.list = list;
										}else{
											 this.list = this.list.concat(list);
										}
										if(this.list.length==data.total){
											 this.nomore = true;
										}
							}
				},
				
				go(url){
					 uni.switchTab({url:url})
				}
								
		 }
	}
</script>

